<template>
  <div>
    <div>
      <el-page-header @back="back" content="大转盘审核页">
      </el-page-header>
    </div>

    <div class="interspaceH"></div>

    <el-steps :active="active" finish-status="success">
      <el-step title="基础信息"></el-step>
      <el-step title="设置欢迎语"></el-step>
      <el-step title="功能设置"></el-step>
    </el-steps>

    <div class="interspaceH"></div>

    <!--基础信息-->
    <div v-if="active==0">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活码名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 220px" placeholder="请输入活码名称" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="选择分组" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择分组" :disabled="true">
            <el-option label="8月运营活动" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客服人员" prop="member">
            <el-radio label="1" v-model="ruleForm.member" :disabled="true">全天在线</el-radio>
            <el-radio label="2" v-model="ruleForm.member" :disabled="true">自动上下线</el-radio>
          <br/>
        </el-form-item>
        <!--添加成员-->
        <el-form-item>
          <el-tag v-if="ruleForm.member == '1'" v-for="item in ruleForm.resource" :key="item.key" closable style="margin-right: 5px" @close="handleClose(item)">
            {{ item.label }}
          </el-tag>
        </el-form-item>
        <!--自动上下线-->
        <el-form-item v-if="ruleForm.member == '2'">
          <!--卡片-->
          <el-card class="box-card" style="width: 500px">
            <el-form>
              <el-form-item label="员工选择">
                <el-button type="small" @click="add">+ 添加员工</el-button>
                <el-tag v-for="item in ruleForm.resource" :key="item.key" closable style="margin-right: 5px" @close="handleClose(item)">
                  {{ item.label }}
                </el-tag>
              </el-form-item>
              <el-form-item label="工作周期">
                <el-select v-model="values" multiple placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上线时间">
                <el-time-picker
                  is-range
                  v-model="value1"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-time-picker>
              </el-form-item>
            </el-form>
          </el-card>
          <!--卡片结束-->
          <el-button @click="addCard" type="text">添加其他工作周期</el-button>
        </el-form-item>
        <el-form-item label="员工添加上限">
          <el-switch v-model="ruleForm.delivery" :disabled="true"></el-switch>
        </el-form-item>
        <!--添加企业备用成员-->
        <el-form-item label="企业备用成员">
          <el-tag v-for="item in ruleForm.resource" :key="item.key" closable style="margin-right: 5px" @close="handleClose(item)">
            {{ item.label }}
          </el-tag>
        </el-form-item>
        <el-form-item label="添加标签">
          <el-tag :key="tag" v-for="tag in ruleForm.biaoqian" closable :disable-transitions="false"
                  @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-top: 12px;" @click="back">返回</el-button>
          <el-button style="margin-top: 12px;" @click="next1" v-if="active!=2">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--添加成员-->
    <div>
      <!--员工添加-->
      <el-dialog :title="titles" :visible.sync="closeDialog" width="26.5%" :close-on-click-modal="false">
        <el-transfer :filterable="true" filter-placeholder="请输入员工昵称" v-model="resourceArr" :data="resource"
                     @left-check-change="leftChange" @right-check-change="rightChange"></el-transfer>
        <br/>
        <el-row>
          <el-col :span="7" :offset="17">
            <el-button size="small" @click="quxiao">取消</el-button>
            <el-button size="small" type="primary" @click="peoples">提交</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
    <!--设置欢迎语-->
    <div v-if="active==1">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="欢迎语" prop="huanyingyu">
            <el-input style="width: 450px" type="textarea" :disabled="true" v-model="ruleForm.huanyingyu" value="用户昵称关于参与中秋免费领月饼的活动"></el-input>
        </el-form-item>

      <el-divider content-position="left"><!--开关按钮-->
        分段式欢迎语
        <el-switch v-model="ruleForm.fdshyy" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </el-divider>
      <el-form v-if="ruleForm.fdshyy == true" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="interspaceH"></div>
        <el-form-item label="时段1：发送时间：">
          <el-col :span="4">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                            style="width: 220px;" :disabled="true"></el-date-picker>
          </el-col>
          <el-col :span="20">
            <el-time-picker
              is-range
              v-model="ruleForm.data2"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
                :disabled="true">
            </el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="分段式欢迎语" prop="fdshyy">
            <el-input style="width: 450px" type="textarea" :disabled="true" v-model="ruleForm.huanyingyu" value="用户昵称关于参与中秋免费领月饼的活动"></el-input>
        </el-form-item>
      </el-form>
        <el-form-item>
          <el-button style="margin-top: 12px;" @click="on1">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next1" v-if="active!=2">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--功能设置-->
    <div v-if="active==2">
      <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
        <el-form-item label="自动通过好友：">
          <el-switch v-model="ruleForm.delivery" :disabled="true"></el-switch>
        </el-form-item>
        <el-form-item label="开启时间">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="全天开启" :disabled="true"></el-radio>
            <el-radio label="选择时间段" :disabled="true"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="二维码预览:">
          <img style="width: 200px;height: 200px" src="@/views/masket/code/zzx_logo.png">
        </el-form-item>
        <el-form-item>
          <el-button style="margin-top: 12px;" @click="on2">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="close">审核未通过</el-button>
          <el-button style="margin-top: 12px;" @click="save">审核通过</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //添加成员页面
      titles: '添加成员',
      closeDialog: false,
      people: '',
      value1: [new Date(2021, 11, 1, 8, 30), new Date(2016, 9, 10, 18, 30)],
      options: [{
        value: '选项1',
        label: '星期一'
      }, {
        value: '选项2',
        label: '星期二'
      }, {
        value: '选项3',
        label: '星期三'
      }, {
        value: '选项4',
        label: '星期四'
      }, {
        value: '选项5',
        label: '星期五'
      }, {
        value: '选项6',
        label: '星期六'
      }, {
        value: '选项7',
        label: '星期日'
      }],
      values: [],
      resource: [{"key": 1, "label": "员工1", "disabled": false},
        {"key": 2, "label": "员工2", "disabled": false}, {"key": 3, "label": "员工3", "disabled": false},
        {"key": 4, "label": "员工4", "disabled": false}, {"key": 5, "label": "员工5", "disabled": false},
        {"key": 6, "label": "员工6", "disabled": false}, {"key": 7, "label": "员工7", "disabled": false},
        {"key": 8, "label": "员工8", "disabled": false}, {"key": 9, "label": "员工9", "disabled": false}],
      resourceArr: [],
      //进度条
      active: 0,
      //上传文件
      fileList: [],
      //表单
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        data2: '',
        delivery: false,
        type: [],
        resource: [],
        desc: '',
        biaoqian: [],
        member: '1',
        huanyingyu: '',
        fdshyy: true,
      },
      inputVisible: false,
      inputValue: '',

    };
  },

  methods: {
      close() {
          this.$message({
              message: '审核未通过',
              type: 'error'
          })
          this.back()
      },
      //审核通过
      save() {
          // tableData.status = 1
          this.$message({
              message: '审核通过',
              type: 'success'
          })
          this.back()
      },
    //添加员工
    add() {
      this.closeDialog = true
    },
    quxiao() {
      this.closeDialog = false
    },
    leftChange(e) {
      let value = this.resourceArr
      let a = value.concat(e);
      this.resourceArr = a
    },
    rightChange(e) {
      let value = []
      this.resourceArr.map((item) => {
        if (item != e[0]) {
          value.push(item)
        }
      })
      this.resourceArr = value;
    },
    //提交
    peoples() {
      let arr = this.resourceArr
      let resource = this.resource
      let result = []
      arr.map((value, index, array) => {
        resource.map((item) => {
          if (item.key == value) {
            result.push(item)
          }
        })
      })
      this.ruleForm.resource = result
      this.quxiao()
    },
    //
    addCard(){

    },


    //下一步
    next1() {
      if (this.active++ > 2) this.active = 0;
    },
    on1() {
      this.active = 0
    },
    on2() {
      this.active = 1
    },
    back() {
      this.$emit("currentHandler", "list")
    },
    /*上传标签*/
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose(item) {
      this.ruleForm.resource.splice(this.ruleForm.resource.indexOf(item), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.ruleForm.biaoqian.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    //上传文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },


  }
}
</script>

<style>
.el-transfer__button {
  display: none;
}
.el-icon-info {
  color: #35abff;
  margin-right: 10px;
}
</style>
